Esiliidese virtuaalreaalsus: Arendaja teejuht WebXR-i ja A-Frame'i integreerimisel

Veeb areneb. Aastakümneid on see olnud kahemõõtmeline tekstide, piltide ja videote maastik, mis piirdub meie seadmete lamedate ekraanidega. Kuid esile kerkib uus piir: kaasahaarav veeb. See järgmine evolutsioon toob kolmemõõtmelised, interaktiivsed ja ruumilised kogemused otse brauserisse, mis on kättesaadavad miljarditele kasutajatele kogu maailmas, ilma et peaks installima ühtegi rakendust. Selle revolutsiooni keskmes on kaks peamist tehnoloogiat: WebXR Device API ja A-Frame.

Esiliidese arendajatele tähendab see põnevat ja monumentaalset nihet. HTML-is, CSS-is ja JavaScriptis lihvitud oskused ei piirdu enam veebisaitide ja veebirakenduste loomisega; need on nüüd teie värav virtuaal- ja liitreaalsuse maailmade loomiseks. See juhend on mõeldud teile – professionaalsele veebiarendajale, kes soovib mõista ja rakendada esiliidese virtuaalreaalsuse jõudu. Me selgitame lahti WebXR-i, tutvustame uskumatult ligipääsetavat A-Frame'i raamistikku ja juhendame teid teie esimese kaasahaarava veebikogemuse loomisel.

Mis on kaasahaarav veeb? Digitaalse interaktsiooni uus dimensioon

Enne tehnilistesse detailidesse sukeldumist on oluline mõista olukorda. Mõiste "kaasahaarav veeb" viitab tehnoloogiate kogumile, mis võimaldab meil kogeda veebisisu kolmemõõtmelises, ruumilises kontekstis. See on katus, mille all eksisteerivad veebis virtuaalreaalsus (VR), liitreaalsus (AR) ja segareaalsus (MR).

• Virtuaalreaalsus (VR): Sukeldab kasutaja täielikult digitaalsesse keskkonda, blokeerides välja reaalse maailma. Seda kogetakse tavaliselt peakomplekti kaudu, näiteks Meta Quest, HTC Vive või Pico Neo.
• Liitreaalsus (AR): Asetab digitaalse informatsiooni või virtuaalsed objektid reaalsele maailmale. Seda kogetakse kõige sagedamini nutitelefoni kaamera kaudu, aga ka nutiprillide abil.
• Segareaalsus (MR): AR-i arenenum vorm, kus virtuaalsed objektid ei ole lihtsalt peale asetatud, vaid saavad ka sisukalt reaalmaailma keskkonnaga suhelda.

Nende kogemuste veebi toomise olulisust ei saa üle hinnata. See eemaldab rakenduste poodide, allalaadimiste ja installatsioonide hõõrdumise. Kasutaja saab lihtsalt klõpsata lingil ja teda transporditakse virtuaalsesse müügisaali, interaktiivsesse haridusmoodulisse või koostöövõimelisse 3D-tööruumi. See ligipääsetavus teeb kaasahaaravast veebist mängumuutja tööstusharudele alates e-kaubandusest ja haridusest kuni kinnisvara ja meelelahutuseni.

WebXR-i mõistmine: Veebipõhise VR/AR-i alus

Maagia, mis teeb selle kõik brauseris võimalikuks, on WebXR Device API. "XR" on üldtermin reaalsuste spektrile (VR, AR, MR). WebXR API on spetsifikatsioon, mis pakub standardiseeritud liidest veebirakendustele VR- ja AR-riistvaraga suhtlemiseks.

Arendus WebVR-ist

Mõned arendajad võivad mäletada varasemat WebVR API-t. Kuigi see oli teerajaja, piirdus see peamiselt virtuaalreaalsusega. WebXR Device API on selle järglane, mis on algusest peale loodud robustsemaks, turvalisemaks ja võimelisemaks nii VR-i kui ka AR-i käitlemiseks. See ühtne lähenemine on kaasahaarava veebisisu tulevikukindlaks muutmise seisukohalt kriitilise tähtsusega.

WebXR-i põhikontseptsioonid

Otse WebXR API-ga töötamine võib olla keeruline, kuid selle põhikontseptsioonide mõistmine on oluline, isegi raamistikku kasutades. See aitab teil mõista, mis toimub kulisside taga.

• XR-seanss: XR-seanss kujutab endast ühendust teie veebilehe ja XR-riistvara vahel. Peate küsima seanssi kasutajalt, kes peab selleks selgesõnaliselt loa andma—see on oluline turva- ja privaatsusfunktsioon. On erinevaid seansitüüpe, näiteks `immersive-vr` ja `immersive-ar`.
• Referentsruum: See määratleb virtuaalmaailma koordinaatsüsteemi. Näiteks `local-floor` ruumi alguspunkt on põrandal kasutaja algasendis, mis sobib ideaalselt toaskaala VR-i jaoks. `viewer` ruum on lukustatud kasutaja pea külge, sobides istuvateks või 360-kraadiste videoelamusteks.
• Vaataja poos: See kirjeldab kasutaja pea (või seadme) asendit ja orientatsiooni virtuaalses ruumis. Brauser edastab selle teabe igal kaadril, mida kasutatakse õige perspektiivi renderdamiseks.
• Sisendallikad: See viitab igale seadmele, mida kasutatakse stseeniga suhtlemiseks, näiteks käekontrollerid, jälgitud käed või isegi kasutaja pilk. API pakub andmeid nende asukoha, orientatsiooni ja nupuvajutuste kohta.

Kuigi võimas, nõuab kogemuse nullist loomine puhta WebXR API-ga sügavat arusaamist 3D-graafika renderdamisest (tavaliselt WebGL-iga) ja palju koodi. Siin tulevad appi raamistikud nagu A-Frame, et protsessi drastiliselt lihtsustada.

Miks A-Frame? WebXR-i kättesaadavaks tegemine kõigile

A-Frame on Mozilla loodud avatud lähtekoodiga veebiraamistik 3D- ja VR-kogemuste loomiseks HTML-i abil. Selle filosoofia on lihtne: muuta WebXR-i arendus lihtsamaks ja ligipääsetavamaks, eriti neile, kellel puudub 3D-graafika programmeerimise taust.

A-Frame on ehitatud võimsa three.js teegi peale, kuid abstraheerib suure osa selle keerukusest. Sajade JavaScripti ridade kirjutamise asemel stseeni seadistamiseks saate seda teha paari tuttava HTML-sildi abil. See deklaratiivne lähenemine on esiliidese arendajatele mängumuutja.

A-Frame'i peamised eelised

• Deklaratiivne HTML: Kui oskate HTML-i, saate VR-stseeni loomist alustada minutitega. Kood on loetav ja kergesti mõistetav.
• Entiteedi-komponendi-süsteemi (ECS) arhitektuur: See on mänguarenduses levinud ja võimas muster. A-Frame'is on kõik stseenis entiteet. Neile entiteetidele lisate komponendid, et anda neile välimus, käitumine ja funktsionaalsus. See lähenemine soodustab pärimise asemel kompositsiooni, muutes koodi modulaarsemaks ja korduvkasutatavamaks.
• Vaikimisi platvormiülene: A-Frame'i stseen töötab kõikjal—lauaarvutis hiire ja klaviatuuriga, mobiiltelefonis puutejuhtimise ja seadme orientatsiooniga ning VR-peakomplektis kontrolleritega. A-Frame haldab kõigi nende platvormide seadistust automaatselt.
• Elav ökosüsteem: A-Frame'i kogukond on loonud tuhandeid komponente kõigeks, alates füüsikast ja osakeste süsteemidest kuni keeruliste kasutajaliidese elementideni. A-Frame Registry on suurepärane koht nende komponentide avastamiseks.
• Visuaalne inspektor: A-Frame'iga on kaasas võimas, sisseehitatud 3D-inspektor, mille saate avada klahvikombinatsiooniga `Ctrl + Alt + I`. See võimaldab teil stseeni reaalajas vaadata ja kohandada, sarnaselt brauseri arendaja tööriistadele 2D-veebilehtede puhul.

Alustamine: Teie esimene A-Frame WebXR-stseen

Liigume teooriast praktikasse. Loome lihtsa virtuaalreaalsuse stseeni, mida saate vaadata igas brauseris ja igas VR-peakomplektis.

Eeltingimused

• Tekstiredaktor, näiteks Visual Studio Code.
• Kaasaegne veebibrauser (Chrome, Firefox, Edge).
• Viis oma HTML-faili serveerimiseks. Live Serveri laiendus VS Code'i jaoks sobib selleks suurepäraselt.
• (Valikuline, kuid soovitatav) VR-peakomplekt tõelise süvenemise kogemiseks.

1. samm: HTML-faili seadistamine

Looge uus fail nimega `index.html` ja lisage järgmine standardkood. Kõige olulisem osa on `